import React, { Component } from 'react';

import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import pxToDp from '../../../utils/pxToDp'
import Avatar from './avatar'


export default class PersonalPanel extends Component{
	render(){
		return (
			<View style={styles.container}>							
				<View style={styles.main}>
					<View style={styles.logOut}>
						<Text style={styles.iconfont}>&#xe625;</Text>
					</View>	
					<View style={styles.top}>
						<View>							
							<Text style={styles.role}>技术中心111</Text>
						</View>
						<View>
							<Avatar/>
						</View>
						<View>
							<Text style={styles.role}>UI设计师</Text>
						</View>
					</View>
					<View style={styles.nameWarp}>
						<Text style={styles.name}>王泽旭</Text>
					</View>
					<View style={styles.btnWarp}>
						<Text style={styles.btn}>申请出差</Text>
					</View>
				</View>
			</View>
		)
	}
}


const styles = StyleSheet.create({
  container:{
  	height:pxToDp(425),
  	backgroundColor:"#5a2688",
  	alignItems:'center'
  },
  logOut:{
  	flexDirection:'row-reverse',
  	alignItems:'center',
  	height:pxToDp(88),
  },
  iconfont:{
  	fontSize:pxToDp(30),
  	color:'white',
  	fontFamily:'iconfont', 	
  },
  main:{
  	width:pxToDp(640),
  	height:pxToDp(275),
  },
  role:{
  	color:'#a795bb',
  	fontSize:pxToDp(24),
  	marginLeft:pxToDp(35),
  	marginRight:pxToDp(35),
  },
  top:{
  	flexDirection:'row',
  	justifyContent:'space-between',
  	alignItems:'center'
  },
  nameWarp:{
 		flexDirection:'row',
  	justifyContent:'center', 
  	marginTop:pxToDp(20),
  	marginBottom:pxToDp(36),
  },
  name:{
  	fontSize:pxToDp(32),
  	color:'white',
  },
  btnWarp:{
  	flexDirection:'row',
  	justifyContent:'center', 
  },
  btn:{
  	backgroundColor:'#f65859',
  	fontSize:pxToDp(26),
  	color:'white',
  	width:pxToDp(184),
  	height:pxToDp(54),
  	textAlign:'center',
  	lineHeight:pxToDp(42),
  	borderRadius:pxToDp(5),
  }
});